<template>
	<view>
		<p-nav 
		title = "富尔玛家居" 
		src = "../../static/image/loginicon.png"
		 >
		  <u-icon name="bell-fill" size="48" color="#999999" slot="right" ></u-icon>
		 </p-nav>
	
			
			<view class="container">
				<view class="banner" style="padding:0 20rpx ;">
					<view class="swiper_cont">
						<swiper
						class="swipercont"
						:indicator-dots="true" 
						:autoplay="true" 
						:interval="3000" 
						:duration="1000">
							<swiper-item class="swiper-item-cont" v-for="(item,index) of swiperDate" :key = "index">
								<view class="swiper-item">
									<image :src="item.images" mode=""></image>
									{{item.url}}
								</view>
							</swiper-item>
							
						</swiper>
					</view>
				</view>
				<view scroll-x class="ribbon" >
					<view class="ribitem" @tap="require">
						<view class="ribicon">
							<image src="../../static/image/index_nav1.png" mode="aspectFit"></image>
						</view>
						<text class="ribtitle">促销活动</text>
					</view>
					<view class="ribitem">
						<view class="ribicon">
							<image src="../../static/image/index_nav2.png" mode=""></image>
						</view>
						<text class="ribtitle">优惠券</text>
					</view>
					
					<view class="ribitem">
						<view class="ribicon">
							<image src="../../static/image/index_nav3.png" mode=""></image>
						</view>
						<text class="ribtitle">优惠活动</text>
					</view>
					
					<view class="ribitem">
						<view class="ribicon">
							<image src="../../static/image/index_nav4.png" mode=""></image>
						</view>
						<text class="ribtitle">精选产品</text>
					</view>
					<view class="ribitem">
						<view class="ribicon">
							<image src="../../static/image/index_nav5.png" mode=""></image>
						</view>
						<text class="ribtitle">内容单页</text>
					</view>
				</view>
				<view class="contain">
					<view class="noteTitle">
						热门活动
					</view>
					<view class="notecont" >
						<view class="noticecont" v-for="n of 3">
							<view class="tip_title">
								利达店
							</view>
							<view class="note_right">
								<view class="notice">
									优惠活动通知
								</view>
								<view class="date">
									今天
								</view>
							</view>
						</view>
					
					</view>
					
					
					<view class="product_cont">
						<view class="product">
							<image src="../../static/image/prod2.png" mode=""></image>
						</view>
					<view class="product">
						<image src="../../static/image/prod1.png" mode=""></image>
					</view>
					<view class="product">
						<image src="../../static/image/prod1.png" mode=""></image>
					</view>
					<view class="product">
						<image src="../../static/image/prod1.png" mode=""></image>
					</view>
					<view class="product">
						<image src="../../static/image/prod1.png" mode=""></image>
					</view>
					<view class="product">
						<image src="../../static/image/prod1.png" mode=""></image>
					</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	
	export default {

		data() {
			return {
				swiperDate:[
					{"id":"222","images":"../../static/image/banner1.png","url":"http:"},
					{"id":"222","images":"../../static/image/banner2.png","url":"http:"}
				]
			}
		},
		methods: {
			require(){
				wx.requestSubscribeMessage({
				  tmplIds: ['oo3gCxOYpyMKmqTv_8tNg3uqzHyt94HbstuZBeaHg8s'],
				  success (res) {
					  console.log(res)
				  }
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	$t12pt:23rpx;
	$t14pt:28rpx;
	$borderRadius:15rpx;
	$t13pt:26rpx;
	page{
		box-sizing: border-box;
	}
	.container{
		display: flex;
		flex-direction: column;
		background-color: $backgroundPage;
		box-sizing: border-box;
		.swiper_cont{
			box-sizing: border-box;
			height: 320rpx;
			border-radius: 20rpx;
			box-shadow: 0 20rpx 20rpx 0 rgba(0, 0, 0, 0.2);
			overflow: hidden;
		}
	}
	.container .swipercont{
		width:100%;
		height: 320rpx;
		display: flex;
		
		flex-direction: column;
	}
	.container .swipercont .swiper-item-cont{
		background-color: #399;
		height: 320rpx;
		
	}
	.container .swiper-item-cont .swiper-item{
		height: 100%;
	}
	.container .swiper-item-cont .swiper-item image{
		width: 100%;
		height: 100%;
	}
	.contain{
		height: 100%;
		padding: 0 $paddingBoth 0 $paddingBoth;
		display: flex;
		flex-direction: column;
		.noteTitle{
			color: #333333;
			font-size: 36rpx;
			box-sizing: border-box;
			padding: 0 38rpx;
			font-weight: 900;
			margin-bottom: 30rpx;
		}
	}
	.ribbon{
		height: 150rpx;
		margin: 40rpx 0 20rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		border-radius: $borderRadius;
		display: flex;
		justify-content: space-around;
		width: 100%;
		background-color: $backgroundPage;
	}
	.ribbon .ribitem{
		display: flex;
		flex-direction: column;
		
		align-items: center;
		
		height:100%;
		width: 100%;
		flex: 1;
	
	}
	.ribbon .ribitem:first-child{
		border-radius: 4px 0 0 4px;
	}
	.ribbon .ribitem:last-child{
		border-radius: 0px 4px 4px 0;
	}
	.ribbon .ribitem .ribicon{
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: center;
		
	}
	.ribbon .ribitem .ribicon image{
		height: 100%;
		width: 80rpx;
	}
	.ribbon .ribitem .ribtitle{
		font-size: $t14pt;
		margin-top: 20rpx;
		color: #999999;
	}
	.notecont{
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		border-radius: $borderRadius;
		background-color: #fff;
		.tip_title{
			color: #DC6055;
			border: 1px solid #DC6055;
			font-size: 22rpx;
			margin-top:26rpx ;
			width: 80rpx;
			height: 36rpx;
			text-align: center;
			border-radius: 5rpx;
			line-height: 36rpx;
		}
		.noticecont{
			box-sizing: border-box;
			display: flex;
			.note_right{
				display: flex;
				flex:1;
				padding: 26rpx 0;
				font-size:28rpx;
				height: 100%;
				border-bottom: 1px solid 	#F3F3F3;
				margin-left: 22rpx;
				.notice{
					color: #333333;
					font-size: 28rpx;
				}
				.date{
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
	
	.userifo{
		display: flex;
		align-items: center;
		height: 100%;
	}
	.userhead{
		height: 60rpx;
		width: 60rpx;
		margin-right: 13rpx;
	}
	.userhead image{
		height: 100%;
		width: 100%;
	}
	.nametitle{
		font-size:$t13pt;
	}
	.notice{
		font-size: $t12pt;
		display: flex;
		align-items: center;
		height: 100%;
		margin-left: 23rpx;
		flex: 1;
		color: #666666;
	}
	.date{
		font-size: 22rpx;
		color:#BFBFBF;
		height: 100%;
		display: flex;
		align-items: center;
		
	}

	.product_cont{
		display: flex;
		flex-direction: column;
	}
	.product_cont .product{
		width: 100%;
		margin-top: 18rpx;
		height: 166rpx;
		border-radius: 4px;
		background-color: #fff;
	}
	.product_cont .product image{
		height: 100%;
		width: 100%;
	}
</style>
